{{template "base/head_old" .}}
{{template "base/navbar" .}}
{{template "repo/nav" .}}
{{template "repo/toolbar" .}}
<div id="body" class="container">
    <div id="issue">
        <div class="col-md-3 filters">
            <div class="filter-list">
                <ul class="list-unstyled">
                    <li><a href="{{.RepoLink}}/issues?state={{.State}}"{{if eq .ViewType "all"}} class="active"{{end}}>All Issues <strong class="pull-right">{{..IssueStats.AllCount}}</strong></a></li>
                    <li><a href="{{.RepoLink}}/issues?type=assigned&state={{.State}}"{{if eq .ViewType "assigned"}} class="active"{{end}}>Assigned to you <strong class="pull-right">{{.IssueStats.AssignCount}}</strong></a></li>
                    <li><a href="{{.RepoLink}}/issues?type=created_by&state={{.State}}"{{if eq .ViewType "created_by"}} class="active"{{end}}>Created by you <strong class="pull-right">{{.IssueStats.CreateCount}}</strong></a></li>
                    <li><a href="{{.RepoLink}}/issues?type=mentioned&state={{.State}}"{{if eq .ViewType "mentioned"}} class="active"{{end}}>Mentioning you <strong class="pull-right">{{.IssueStats.MentionCount}}</strong></a></li>
                </ul>
            </div>
            <div class="label-filter">
                <h4>Label</h4>
                <ul class="list-unstyled" id="label-list" data-ajax="{{$.RepoLink}}/issues/labels/delete">
                    {{range .Labels}}
                    <li class="label-item{{if eq $.SelectLabels .Id}} label-selected{{end}}" id="label-{{.Id}}" data-id="{{.Id}}">
                        <a href="?type={{$.ViewType}}&state={{$.State}}{{if not (eq $.SelectLabels .Id)}}&labels={{.Id}}{{end}}">
                            <span class="pull-right count">{{if $.IsShowClosed}}{{.NumClosedIssues}}{{else}}{{.NumOpenIssues}}{{end}}</span>
                            <span class="color" style="background-color: {{.Color}}" data-color="{{.Color}}"></span>
                            <span class="name">{{.Name}}</span>
                        </a>
                        <a class="del pull-right" href="#" data-id="{{.Id}}"><i class="fa fa-times-circle-o"></i></a>
                    </li>
                    {{end}}
                    {{if or .IsRepositoryOwner .IsAdmin}}
                    <li class="label-change-li" style="display: none">
                        <form id="label-change-form" action="{{$.RepoLink}}/issues/labels/edit" method="post">
                            {{.CsrfTokenHtml}}
                            <div class="input-group label-change-color-picker form-group" style="margin-bottom: 2px">
                                <input type="text" class="form-control" name="title" required="required" id="label-name-change-ipt"/>
                                <input type="hidden" name="color" id="label-color-change-ipt" value="#444444"/>
                                <span class="input-group-addon"><i></i></span>
                                <input type="hidden" name="id" id="label-change-id-ipt" value="0"/>
                            </div>
                            <div class="form-group text-right">
                                <input class="form-control input-sm" type="text" id="label-color-change-ipt2" value="#444444"/>
                                <button class="btn btn-default btn-sm">Save</button>
                            </div>
                        </form>
                    </li>
                    {{end}}
                </ul>
                {{if or .IsRepositoryOwner .IsAdmin}}
                <button class="btn btn-default btn-block label-button" id="label-manage-btn">Manage Labels</button>
                <hr/>
                <form id="label-add-form" action="{{$.RepoLink}}/issues/labels/new" method="post">
                    {{.CsrfTokenHtml}}
                    <h5><strong>New Label</strong></h5>
                    <div class="input-group label-color-picker form-group">
                        <input type="text" class="form-control" name="title" required="required" id="label-name-ipt"/>
                        <input type="hidden" name="color" id="label-color-ipt" value="#444444"/>
                        <span class="input-group-addon"><i></i></span>
                    </div>
                    <div class="form-group text-right">
                        <input class="form-control input-sm" type="text" id="label-color-ipt2" value="#444444"/>
                        <button class="btn btn-default btn-sm">Create</button>
                    </div>
                </form>
                {{end}}
            </div>
        </div>
        <div class="col-md-9">
            {{template "base/alert" .}}
            <div class="filter-option">
                <div class="btn-group">
                    <a class="btn btn-default issue-open{{if not .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}">{{.IssueStats.OpenCount}} Open</a>
                    <a class="btn btn-default issue-close{{if .IsShowClosed}} active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed">{{.IssueStats.ClosedCount}} Closed</a>
                </div>
            </div>
            <div class="issues list-group">
                {{range .Issues}}{{if .Poster}}
                <div class="list-group-item issue-item{{if not .IsRead}} unread{{end}}" id="issue-{{.Id}}">
                    <span class="number pull-right">#{{.Index}}</span>
                    <h5 class="title">
                        <a href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
                        <span class="labels">
                            {{range .Labels}}
                            <span class="label" style="background-color: {{.Color}}">{{.Name}}</span>
                            {{end}}
                        </span>
                    </h5>
                    <p class="info">
                        <span class="author"><img class="avatar" src="{{.Poster.AvatarLink}}" alt="" width="20"/>
                        <a href="{{AppSubUrl}}/{{.Poster.Name}}">{{.Poster.Name}}</a></span>
                        <span class="time">{{TimeSince .Created $.Lang}}</span>
                        <span class="comment"><i class="fa fa-comments"></i> {{.NumComments}}</span>
                    </p>
                </div>
                {{end}}{{end}}
            </div>
            </div>
        </div>
    </div>
</div>
<script src="/js/bootstrap-colorpicker.min.js"></script>
<script>
    $(function(){
        $('.label-color-picker').colorpicker({
            input: $('#label-color-ipt')
        }).on('changeColor', function (ev) {
            var $ipt = $('#label-color-ipt2');
            if ($ipt.val().length != 4) {
                $ipt.val(ev.color.toHex());
            }
        });
        $('.label-change-color-picker').colorpicker({
            input:$('#label-color-change-ipt')
        }).on('changeColor', function (ev) {
            var $ipt = $('#label-color-change-ipt2');
            if ($ipt.val().length != 4) {
                $ipt.val(ev.color.toHex());
            }
        });
    });
</script>
{{template "base/footer_old" .}}
